<template>
  <div class="item" @click="toStore">
    <img :src="item.pic" alt="" />
    <div class="item_right">
      <div class="title">{{ item.title }}</div>
      <div class="sales">月售{{ item.sales }}</div>
      <div class="price">起送费 ￥{{ item.price }} 免配送费</div>
      <div class="label">
        <span v-for="(i, index) in item.label">{{ i }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>
<script setup>
  import {useRouter} from 'vue-router'
  const router = useRouter()
  const toStore = ()=>{
    router.push('/store')
  }

</script>

<style lang='less' scoped>
 .item{
            display: flex;
            img{
                width: 60px;
                height: 60px;
            }

            .item_right{
                margin-left: 20px;
                line-height: 15px;
                font-size: 6px;
                margin:auto auto;
                .title{
                    font-size: 8px;
                    font-weight: bold;
                }

                span{
                    background-color: pink;
                    margin-right: 5px;
                    padding: 0 3px;
                    border-radius: 5px;
                }
            }
        }
</style>